<template>
    <div class="assignment">
    <div class="assignment-header">
      <button class="back-button" @click="goBack">← 返回</button>
      <h2>AIGC 作业</h2>
      <p>2024.12.26 第一次作业</p>
      <p>截止提交时间: 12月26日 23:59</p>
      <button class="submit-button" @click="submitAll">提交作业</button>
    </div>
    <div class="assignment-content">
      <h3>题目一（100分）</h3>
      <p style="color: #4B5563;">软件工程的重要环节和内容</p>
      <div class="assignment-actions">
        <button class="input-button" @click="submitText">文本方式<br>支持键盘输入</button>
        <button class="attachment-button" @click="submitAttachment">附件方式<br>支持doc、docx文件上传</button>
      </div>
      <textarea v-model="assignmentText" rows="20" cols="50" class="textarea"></textarea>
      
    </div>
  </div>
  </template>
  
  <script>
  import { ref } from 'vue';

  export default {
    setup() {
    
      const router = useRouter();
      const assignmentText = ref('');
      const goBack = () => {
      // 使用路由返回上一页
         router.go(-1);
      };

      const submitText = () => {
        // 处理文本提交逻辑
        console.log('文本提交:', assignmentText.value);
      };
  
      const submitAttachment = () => {
        // 处理附件提交逻辑
        console.log('附件提交');
      };
  
      const submitAll = () => {
        // 处理所有内容的提交逻辑
        console.log('提交所有内容');
        submitText();
        submitAttachment();
        alert('提交成功');
        goBack();
      };
  
      return {
        assignmentText,
        goBack,
        submitText,
        submitAttachment,
        submitAll
      };
    }
  };
  </script>
  
  <style scoped>
 .assignment {
  width: 100%;
  height: 100vh;
  font-family: Arial, sans-serif;
}

.assignment-header {
  display: flex;
  justify-content: space-between;
  height: 8%;
  align-items: center;
  background-color: #13227A;
  color: white;
}

.back-button {
  background-color: transparent;
  margin-left: 3%;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.back-button:hover {
  text-decoration: underline;
}

.submit-button {
  background-color: #1a3a8b;
  height: 70%;
  width: 10%;
  margin-right: 2%;
  color: white;
  border: 1px solid #ffffff;
  cursor: pointer;
  border-radius: 5px;
}

.submit-button:hover {
  background-color: #1a3a8b;
}

.assignment-content {
  height: 90%;
  padding: 20px;
  background-color: #f9f9f9;
}

.textarea {
  width: 100%;
  height: 50%;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
}

.assignment-actions {
  height: 13%;
  margin-top: 2%;
  margin-bottom: 1%;
  display: flex;
}

.input-button {
  background-color: #1a3a8b;
  color: white;
  border: none;
  float: left;
  width: 12%;
  height: 100%;
  padding: 5px 10px;
  border-radius: 5px;
}

.attachment-button {
  background-color: #d6dae2;
  margin-left: 1%;
  color: rgb(12, 12, 12);
  border: none;
  width: 12%;
  padding: 5px 10px;
  float: left;
  border-radius: 5px;
}

  </style>